<template>
  <div>
    <input v-model.number="page" type="number" style="width: 5em"> 共:{{numPages}}页
    <div style="width: 56%;">
      <div v-if="loadedRatio > 0 && loadedRatio < 1" style="background-color: green; color: white; text-align: center" :style="{ width: loadedRatio * 100 + '%' }">{{ Math.floor(loadedRatio * 100) }}%</div>
      <pdf v-if="show" ref="pdf" style="border: 1px solid red" :src="pdf_src" :page="page" :rotate="rotate" @password="password" @progress="loadedRatio = $event" @error="error" @num-pages="numPages = $event" @link-clicked="page = $event"></pdf>
    </div>
  </div>
</template>
<script>
import pdf from 'vue-pdf'

export default {
  name:"PDF_preview",
  components: {
    pdf: pdf
  },
  data () {
    return {
      show: true,
      pdf_src: "",
      loadedRatio: 0,
      page: 1,
      numPages: 0,
      rotate: 0,
    }
  },
  mounted() {
      this.pdf_src = this.$target + this.$route.query.file_name
  },
  methods: {
    password: function(updatePassword) {
      updatePassword(prompt('password is "test"'));
    },
    error: function(err) {
      console.log(err);
    }
  }
}
</script>